/**
\file ColorModel.qml
\brief Definition of the color toolbox

Color Toolbox is the object associtaed to the graphics work area that shows the colors used
in the layers of the image drawing (already in vector mode)
For every color there are parameters associated and strictly related to the printing setting for the
drawing. \n
The list of the color toolbox is populated with the real palette used by a specific drawing and can be changed
by the user. Every listed color is a clickable element that expands to show / change the desiderd parameters.

\todo Check the detailed description when parameters are defined.
\todo Adjust adaptive management in the text elements.

\author © 2011 Enrico Miglino / Tech Consulting (enrico.miglino@ovi.com)
\author "Black Cat Cutting Studio" is protected by the copyright law
\author Distributed under the LGPL 3.0 license.
\version 1.0 alpha
\date 2011

\par Black Cat Cutting Studio licensing notes

    "Black Cat Cutting Studio" is free software: you can redistribute it
    and/or modify it under the terms of the Lesser GNU General Public License
    as published by the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    "Black Cat Cutting Studio" is distributed in the hope that it
    will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    Lesser GNU General Public License for more details.

    You should have received a copy of the Lesser GNU General Public License
    along with "Black Cat Cutting Studio".
    If not, see <http://www.gnu.org/licenses/>.

*/
import QtQuick 1.0

/*
The rectange color model definition
Contains all the component needed to build the object when instantiated, including
the elements that manage animation (showing extended properties for a single item)
Rectangle properties settings define the background aspect of the
*/
Rectangle {
    id: colorToolbox

    // background rectangle of the area
    Rectangle {
        id: backRect

        width: parent.width
        height: parent.height
        radius: 5
        color: "grey"
        border.color: "darkgrey"
        border.width: 2
    }

    // Tiled image to fill the toolbar area
    Image {
        id: tiledGraphics

        width: parent.width
        height: parent.height
        // fillMode is set to tiled, to repeat on all the filled area.
        fillMode: Image.Tile
        // The image source file (base element to tile)
        source: "../images/background.svg"
    }

    /*
    The definition of the container delegate to show the list items.
        This delegate has two modes:
        1. List mode (default), which just shows the color and the corresponding layer name
        2. Details mode, which shows the details on the color and layer color parameters.
    */
    Component {
        id: recipeDelegate

        /*
        The recipe component

        recipe is the component that contains the element - usually hidden - to show the details
        for every color item of the list.
        */
        Item {
            id: recipe

            /*
            Create a property to contain the visibility of the details.
            We can bind multiple element's opacity to this one property,
            rather than having a "PropertyChanges" line for each element we
            want to fade.
            */
            property real detailsOpacity : 0
            /*
             Minimum list height, that can be grown for screen adaption.
             This value depends by the color object real size.
             */
            property int minListSize: 32
            property int minColorBoxSize: 20
            property int maxColorBoxSize: 60
            // List item background margin
            property int listHeightMargin: 4

            width: listView.width
            height: minListSize + listHeightMargin * 2

            /*
            The recatangle background of the list item
            */
            Rectangle {
                id: background
                x: 2; y: 2;
                width: parent.width - x*2; height: parent.height - y*2
                color: "white"
                border.color: "#708080"
                radius: 5
            }

            /*
            Mouse area.

            The mouse region (clickable area) covers the entire delegate.
            When clicked the state of the recipe is changed to 'Details'
            showing the extended view for that color item.
            */
            MouseArea {
                id: clickableListItem

                anchors.fill: parent
                onClicked: recipe.state = "Details";
            }

            /* toplayout]
            Layout the page for the list component
            Picture, title, and elements are at the top while method is at the bottom.
            The elements should not be visible in the list wile their opacity is set
            to recipe.detailsOpacity.
            */
            Row {
                id: topLayout

                // x and y position of the row data inside the background of the item
                // should be
                x: 10; y: 10;
                height: recipe.height; width: recipe.width
                spacing: 10 // elements separator in a row

                /* [recipeimage]
                The color layer representation.
                The image is build with a rectangle whose color is dynamically set when an item
                is added to the list.
                */
                Rectangle {
                    id: recipeImage

                    width: recipe.minColorBoxSize; height: recipe.minColorBoxSize
                    border.color: "#626060"; border.width: 2; radius: 5

                    // Color values assignement (build R, G, B string representation)
                    color: rgb_values
                }

                /* [listColumn]
                    The list column element. This is the second part of every row. Contains the essential
                    informations to be shown; when the item is in 'Delegate' state are shown all the other details.
                */
                Column {
                    id: listColumn

                    // Column width is sized respect to the color rectangle
                    width: background.width - recipeImage.width - 0;
                    height: recipeImage.height
                    // intra-row spacing in the columns
                    spacing: 5


                    // Layer name (always shown in the list)
                    Text {
                        text: title

                        font.family: "Tahoma"
                        font.capitalization: Font.SmallCaps
                        font.bold: true;
                        style: Text.Raised;
                        verticalAlignment: Text.AlignVCenter;
                        font.pointSize: 14
                    }

                    /*
                        The Details header section of the column are shown only when the user click on the item,
                        so the column expands to full-items view.
                    */
                    Text {
                        text: "Details"
                        font.pointSize: 14; font.bold: true
                        opacity: recipe.detailsOpacity
                    }

                    // Color details
                    Text {
                        // numerical color representation
                        text: "RGB: " + rgb_values
                        font.pointSize: 12
                        width: parent.width
                        opacity: recipe.detailsOpacity
                    }

                    // Layer number
                    Text {
                        text: "Layer number: " + layer_number
                        font.pointSize: 12
                        wrapMode: Text.WordWrap
                        width: parent.width
                        opacity: recipe.detailsOpacity
                    }
                }
            }

            /*
            The detail section of the item. The followin item contains the details elements,
            expanded when the 'Detail' state changes.

            When the item is clicked, the detail trasnparency property changes
            so it became visible exposing all the elements.
            This item is anchored to the bottom of the topLayout, so epanding
            all the area is filled top-down. While the top layout part of the
            color item is build of the color icon and
            */
            Item {
                id: details

                // Positioning of the object
                x: 10; width: parent.width //- 20
                anchors {
                    top: topLayout.bottom;
                    topMargin: 10; bottom: parent.bottom;
                    bottomMargin: 10
                }
                opacity: recipe.detailsOpacity

                // Short description
                Text {
                    anchors.top: parent.top
                    text: "Layer definition:"
                    font.pointSize: 12; font.bold: true
                }

                Text {
                    text: short_description
                    font.pointSize: 12
                    wrapMode: Text.WordWrap
                    width: parent.width
                }

                // Long description title
                Text {
                    id: longDescTit

                    text: "Layer details:"
                    font.pointSize: 12; font.bold: true
                }

                /*
                  Long description and other stuff
                  The long description of the layer and other stuff is in a flickable item
                  so the text informations doesn't matter if they exceed from the toolbar
                  view area.
                */
                Flickable {
                    id: flick

                    // same horizontal size of the header layout page
                    width: parent.width
                    height: parent.height
                    // Area is anchored to the rest of the item
                    anchors {
                        top: longDescTit.bottom;
                        bottom: parent.bottom
                    }

                    // Height is dinamically set on the child text area
                    contentHeight: longDesc.height
                    // Clipping does no matter: the area is scrollable
                    clip: true

                    Text {
                        id: longDesc

                        text: long_description
                        font.pointSize: 12
                        wrapMode: Text.WordWrap
                        width: parent.width
                    }

                }
            }

            // A button to close the detailed view, i.e. set the state back to default ('').
            TextButton {
                anchors {
                    top: background.top
                    topMargin: recipe.maxColorBoxSize + 15
                    left: background.left;
                    leftMargin: 10 }
                opacity: recipe.detailsOpacity
                text: "Close"

                onClicked: recipe.state = '';
            }

            states: State {
                name: "Details"

                PropertyChanges { target: background; color: "white" }
                PropertyChanges {
                    target: recipeImage;
                    width: recipe.maxColorBoxSize;
                    height: recipe.maxColorBoxSize
                }
                PropertyChanges { target: recipe; detailsOpacity: 1; x: 0 } // Make details visible
                PropertyChanges { target: recipe; height: listView.height } // Fill the entire list area with the detailed view

                // Move the list so that this item is at the top.
                PropertyChanges { target: recipe.ListView.view; explicit: true; contentY: recipe.y }

                // Disallow flicking while we're in detailed view
                PropertyChanges { target: recipe.ListView.view; interactive: false }
            }

            transitions: Transition {
                // Make the state changes smooth
                ParallelAnimation {
                    NumberAnimation { duration: 300; properties: "detailsOpacity,x,contentY,height,width" }
                }
            }
        }
    }

    ListView {
        // The listView method of the color toolbar
        id: listView

        anchors.fill: parent
        model: RecipesModel {}
        delegate: recipeDelegate
    }
}
